<script setup lang="ts">

    /**
     * 组合式API中没有OnBeforeCreate和Oncreated钩子，setup就相当于这俩个
     * 生命周期钩子详细情况 查看官网
     */
    import {ref, onBeforeMount, onBeforeUnmount,onUpdated,onBeforeUpdate, onMounted, onUnmounted} from 'vue';
    let sum = ref(0);

    onBeforeMount(()=>{
        console.log("挂载之前调用");
    })

    onMounted(()=>{
        console.log("挂载之后调用");
    })

    onBeforeUpdate(()=>{
        console.log("数据更新之前调用");
    })

    onUpdated(()=>{
        console.log("在组件因为响应式状态变更而更新其 DOM 树之后调用");
    })

    onUnmounted(()=>{
        
        console.log("卸载之后调用");
    })
   
</script>

<template>
    <h2> 当前求和为{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
</template>

<style scoped>

</style>